{{define "admin/dashboard.html"}}
{{template "default/header.html" .}}

        <main role="main" class="content">
<div class="container-fluid">
    <div class="row justify-content-center mb-4 g-4 align-items-stretch">
        <div class="col-md-4 col-12 mb-3">
            <div class="card shadow border-0 rounded-4 text-center p-4 h-100 d-flex flex-column justify-content-center">
                <div class="mb-2 fw-bold" style="font-size:1.2rem;color:#3b82f6;">网站总数</div>
                <div style="font-size:2.8rem;font-weight:800;color:#222;">{{.websiteCount}}</div>
            </div>
        </div>
        <div class="col-md-4 col-12 mb-3">
            <div class="card shadow border-0 rounded-4 text-center p-4 h-100 d-flex flex-column justify-content-center">
                <div class="mb-2 fw-bold" style="font-size:1.2rem;color:#f59e42;">分类总数</div>
                <div style="font-size:2.8rem;font-weight:800;color:#222;">{{.categoryCount}}</div>
            </div>
        </div>
        <div class="col-md-4 col-12 mb-3">
            <div class="card shadow border-0 rounded-4 text-center p-4 h-100 d-flex flex-column justify-content-center">
                <div class="mb-3 fw-bold" style="font-size:1.2rem;color:#3b82f6;">系统信息</div>
                <div class="row g-2">
                    <div class="col-6 text-start">
                        <div class="small text-muted mb-1"><i class="fa fa-desktop me-1"></i><strong>&nbsp;操作系统：</strong>{{.systemInfo.OS}}</div>
                    </div>
                    <div class="col-6 text-start">
                        <div class="small text-muted mb-1"><i class="fa fa-code me-1"></i><strong>&nbsp;Go版本：</strong>{{.systemInfo.GoVersion}}</div>
                    </div>
                    <div class="col-6 text-start">
                        <div class="small text-muted mb-1"><i class="fa fa-microchip me-1"></i><strong>&nbsp;CPU数量：</strong>{{.systemInfo.CPUCount}}</div>
                    </div>
                    <div class="col-6 text-start">
                        <div class="small text-muted mb-1"><i class="fa fa-database me-1"></i><strong>&nbsp;内存使用：</strong>{{.systemInfo.MemoryUsage}} MB</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-4 align-items-stretch">
        <div class="col-md-7 col-12 mb-3">
            <div class="card shadow border-0 rounded-4 p-4 h-100 d-flex flex-column">
                <div class="fw-bold fs-4 mb-3 text-start">最近添加的网站</div>
                <div class="table-responsive flex-grow-1">
                    <table class="table align-middle mb-0">
                        <thead>
                            <tr style="font-size:1rem;">
                                <th>网站名称</th>
                                <th>URL</th>
                                <th>添加时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{range .recentWebsites}}
                            <tr>
                                <td>{{.Name}}</td>
                                <td style="max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{.Url}}</td>
                                <td>{{.CreatedAt  | formatDate }}</td>
                            </tr>
                            {{end}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-5 col-12 mb-3">
            <div class="card shadow border-0 rounded-4 p-4 h-100 d-flex flex-column">
                <div class="fw-bold fs-4 mb-3 text-start">分类网站数量</div>
                <div class="flex-grow-1 d-flex align-items-center justify-content-center">
                    <canvas id="groupStatChart" style="width:100%;height:500px;"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

</main>
</div>
</div>

<script src="/assets/admin/jquery-3.6.4.min.js"></script>
<script src="/assets/admin/bootstrap-4.6.2.min.js"></script>
<script src="/assets/admin/chart.js"></script>
<script>
    var groupStats = [];
    {{ range .groupStats }}
    groupStats.push({Name: "{{ .Name }}", Count: {{ .Count }}});
    {{ end }}
    const ctx = document.getElementById('groupStatChart').getContext('2d');
    const labels = groupStats.map(item => item.Name);
    const data = groupStats.map(item => item.Count);
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '网站数量',
                data: data,
                backgroundColor: '#3b82f6',
                borderRadius: 8,
                maxBarThickness: 36
            }]
        },
        options: {
            plugins: {
                legend: { display: false }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: { font: { size: 14 } }
                },
                y: {
                    beginAtZero: true,
                    grid: { color: '#f0f0f0' },
                    ticks: { font: { size: 14 } }
                }
            }
        }
    });
</script>
</body>
</html>
{{end}}
